import React, { Component } from "react";

// 引入样式文件
import "./index.less";
export default class Header extends Component {
  // 初始化数据
  constructor(props) {
    super(props);
    // 将属性数据转为状态数据
    this.state = {
      //设置选中的页面 添加一个choose-----当点击的时候添加choose
      [props.choosePage]:'choose'
    };
  }
  // 当点击时，切换
  togglePage(page) {
      let state = this.state
      for(let key  in state){
        state[key]=''
      }
      // console.log(state)
      // 更改状态
      state[page]='choose' 
      // 更新状态
      this.setState(state)
      // 执行父组件方法，并传递数据
      this.props.method(page)
     
  }
  render() {
    let { start, css, js, component, marker } = this.state;
    return (
      <div className="app-header navbar navbar-static-top">
        <div className="container">
          <div className="navbar-header">
            <a
              onClick={e => this.togglePage("home")}
              href="javascript:void(0);"
              className="navbar-brand"
            >
              Bootstrap
            </a>
          </div>
          <ul className="navbar-nav nav nav-pills pull-right">
            <li>
              <a href="javascript:void(0);">Bootstrap中文网</a>
            </li>
          </ul>
          <ul className="navbar-nav nav nav-pills">
            <li className={start} onClick={e => this.togglePage("start")}>
              <a href="javascript:void(0);">起步</a>
            </li>
            <li className={css} onClick={e => this.togglePage("css")}>
              <a href="javascript:void(0);">全局 CSS 样式</a>
            </li>
            <li
              className={component}
              onClick={e => this.togglePage("component")}
            >
              <a href="javascript:void(0);">组件</a>
            </li>
            <li className={js} onClick={e => this.togglePage("js")}>
              <a href="javascript:void(0);">JavaScript 插件</a>
            </li>
            <li className={marker} onClick={e => this.togglePage("marker")}>
              <a href="javascript:void(0);">定制</a>
            </li>
            <li>
              <a href="javascript:void(0);">网站实例</a>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}
